function Magnifier() {

    this.small_img_wrapper = document.querySelector(".small-img");
    // 焦点元素; 
    this.focus = document.querySelector(".focus");
    // 大图焦点元素; 
    this.big_img_focus = document.querySelector(".big-img");
    // 大图图片 ; 
    this.big_img = this.big_img_focus.querySelector("img");

    // 所有内容的容器 :
    this.container = document.querySelector(".magnifier_left");
    // 分页器之中的按钮 : 
    this.pagination_bullets = document.querySelectorAll(".paginaion img");
    // 选择小图图片 ; 
    this.small_img = document.querySelector(".small-img img");

    // 创建图片数据 : 
    this.img_list = [
        {
            small: "https://ecuniplatform-static.helenarubinstein.cn/medias/绿宝瓶精华100ml_e486d9938a734f9588853544239b182b/绿宝瓶精华100ml.jpg",
            big: "https://ecuniplatform-static.helenarubinstein.cn/medias/绿宝瓶精华100ml_e486d9938a734f9588853544239b182b/绿宝瓶精华100ml.jpg"
        },
        {
            small: "https://ecuniplatform-static.helenarubinstein.cn/product/20200817/0c9b42fc-e718-41cb-bd70-1da0dd854b29.jpg",
            big: "https://ecuniplatform-static.helenarubinstein.cn/product/20200817/0c9b42fc-e718-41cb-bd70-1da0dd854b29.jpg"
        }
    ]

    // 获取到容器的偏移; 
    this.container_offset = {
        left: this.container.offsetLeft,
        top: this.container.offsetTop
    }
    // 获取focus的宽高; 

    this.focus_style = getComputedStyle(this.focus);
}
// 绑定事件; 
Magnifier.prototype.bindEvent = function () {
    // 给小图绑定事件; 
    var instance = this;
    // 鼠标移入小图，应该让小图焦点和大图焦点同时显示; 
    this.small_img_wrapper.onmouseover = function () {
        instance.toggle("block");
    }
    // 鼠标移出小图，应该让小图焦点和大图焦点同时隐藏; 
    this.small_img_wrapper.onmouseout = function () {
        instance.toggle("none");
    }
    // 给元素绑定鼠标移动事件; 
    this.small_img_wrapper.onmousemove = function (evt) {
        // 获取鼠标的信息 : x,y 
        // 这个鼠标信息是用来让focus定位的; 
        // - 一致性 ;
        // - 定位元素的参照物 和鼠标位置的 参照 要一致; 
        var e = evt || event;
        // 如果是用 client获取鼠标的位置，那么我们需要减去 容器的左侧偏移量和上侧的偏移量; 

        instance.move(e.pageX - instance.container_offset.left, e.pageY - instance.container_offset.top);
    }
    // 给分页器添加事件 : 
    for (let i = 0; i < this.pagination_bullets.length; i++) {
        this.pagination_bullets[i].onclick = function () {
            instance.changeItem(i);
        }
    }
}
// 切换图片显示隐藏; 
Magnifier.prototype.toggle = function (type) {
    this.focus.style.display = type;
    this.big_img_focus.style.display = type;
}
// 让图片跟随移动; 
Magnifier.prototype.move = function (x, y) {

    var _left = x - parseInt(this.focus_style.width) / 2
    var _top = y - parseInt(this.focus_style.height) / 2

    // 因为我们的焦点框不能移出到外部，所以我们要给焦点框设置边界; 

    // left 值边界 : 
    // 最小边界， 最大边界; 
    _left = _left < 0 ? 0 : _left;
    _left = _left > 114 ? 114 : _left;

    _top = _top < 0 ? 0 : _top;
    _top = _top > 114 ? 114 : _top;

    this.focus.style.left = _left + "px";
    this.focus.style.top = _top + "px";


    var _left_per = _left / 114;
    var _top_per = _top / 114;

    this.big_img.style.left = -260 * _left_per + "px";
    this.big_img.style.top = -260 * _top_per + "px";
}

Magnifier.prototype.changeItem = function (index) {
    for (var i = 0; i < this.pagination_bullets.length; i++) {
        this.pagination_bullets[i].className = "";
    }
    this.pagination_bullets[index].className = "active"
    this.small_img.src = this.img_list[index].small;
    this.big_img.src = this.img_list[index].big;

}
var m = new Magnifier();
// 创建一个实例对象 : 


m.bindEvent();